:host{
  width: 100%;
}
.page-box, .mini-page-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 45px 0;
  position: relative;

}
.page-button {
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items: center;
}
.page-button a, .page-button .current-page{
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 15px;
  border: 1px solid;
  text-align: center;
  line-height: 36px;
  color: #3f51b5;
  margin-right: 10px;
  user-select: none;
}
.page-button a:hover, .page-button div.active{
  background-color: #3f51b5;
  color: #FFFFFF;
}
.page-button .disabled a {
  color: #a6a6a6;
  border-color: #a6a6a6;
  cursor: default;
}
.page-button .disabled a:hover {
  color: #a6a6a6;
  background-color: #ffffff;


}
.page-input {
  right: 0;
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.page-input .page-info {
  margin-right: 10px;
}
.page-input .input-number {
  margin-right: 5px;
}
.page-input input{
  width:48px;
  padding: 2px;
  height: 26px;
  line-height: 26px;
}
.sure{
  border: 1px solid #999999;
  padding: 4px 12px;
  margin-left: 8px;
}
.page-input span{
  font-size: 14px;
}
.page-input  input{
  margin-left:5px;
  margin-right: 5px;
}
.page-input .button {
  /*height: 26px;*/
  line-height: 26px;
  width: 48px;
}

.mini-page-box {
  width: 80px;
  justify-content: space-between;
  padding: 18px 0;
}
.mini-page-box .pagination-previous, .mini-page-box .pagination-next {

  background-color: #3f51b5;
  border-radius: 50%;
  font-size: 15px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  user-select: none;
}
.mini-page-box a {
  color: #FFFFFF;
}
.mini-page-box .disabled {
  background-color: #a6a6a6;
}
.mini-page-box .disabled a {
  cursor: default;

}
